<template>
  <div>
      <!--用户活跃数-->
    <div class="echarts">
      <div class="main clazz-user-num" id="echarts-clazz-user-num" style="width: 100%; height: 400px"></div>
    </div>
    <div class="btns">
        <el-button class="btn" @click="returnToList">返回列表</el-button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            classAvg: [],
            x: [], //横坐标
            y: [],//纵坐标
            echartsClazzUserNum: null,
            examId: null
        }
    },
    created(){
        //试卷id
        let id = this.$route.query.examId;
        if( id && parseInt(id) !== 0){
            // this.getAvgScore(id);
            this.examId = id;
        }
    },
    mounted(){
        
        this.echartsClazzUserNum = this.$echarts.init(document.getElementById("echarts-clazz-user-num"));
        this.init();
        this.getAvgScore(this.examId);
        
    },
    methods:{
        init(){
            window.addEventListener("resize", ()=>{
                this.echartsClazzUserNum.resize();
            })
        },
        async getAvgScore(id){
            const resp = await this.getRequest("/api/teacher/analyze/paperClasses/"+id);
            if( resp && resp.code == 200){ //初始化数据
                this.classAvg = resp.obj.classAvg;
                this.initData();
                this.echartsClazzUserNum.setOption(this.setOptions("班级平均成绩",this.x,this.y));
            }
        },
        initData(){
         
            let x = [];
            let y = [];
            for(let i = 0;i<this.classAvg.length;i++){
                x.push(this.classAvg[i].name);
                y.push(this.classAvg[i].avgScore);
            }
            this.x = x;
            this.y = y;
            
        },
        setOptions(title,name,data){
            return {
                title: {
                    text: title,
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: name
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: data,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }
        },
        returnToList(){
            this.$router.replace("/teacher/performance/list");
        }
    }
}
</script>

<style lang="scss" scoped>
.echarts{
  width:100%;
  height: 445px;
  margin: 30px 20px;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  @include prefix(box-shadow,0 2px 4px #0000003b);
}
.btns{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .btn{
        width: 150px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background:#66BB6A; 
        color: #fff;
        font-family: "华文楷体";
    }
}
</style>